<template>
	<view class="dialog-container" v-if="dispaly">
		<view class="dialog-mask" @click.stop=""></view>
		<view class="shell-mina">
			<view class="shell-title">{{title}}</view>
			<slot></slot>
			<text class="shell-btn" @click="clickConfirm">{{confirmText}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		name:"dialog-shell",
		props:{
		   title:{
			   type:String,
			   required:true,
			   validator: value=>{
				   return value.length>0
			   }
		   },
			   confirmText:{
				   type:String,
				   required:false,
				   default:"确认",
				   validator: value=>{
				   	 return value.length>0
				   }
			   }
		},
		data() {
			return {
				dispaly:false
			};
		},
		methods:{
			showDialog(){
				this.dispaly=true
			},
			hideDialog(){
				this.dispaly=false
			},
			clickConfirm(){
				this.$emit("confirm")
				this.dispaly=false
			},
			
		}
	}
</script>

<style>
  .dialog-container{
	  width: 100%;
	  height: 100%;
	  position: fixed;
	  top: 0px;
	  left: 0px;
	  z-index: 1;
  }
  .dialog-mask{
	  opacity: 0.5;
	  background-color: black;
	  position: absolute;
	  top: 0;
	  width: 100%;
	  height: 100%;
	  min-height: 100vh;
  }
  
  .shell-mina{
	  display: flex;
	  flex-direction: column;
	  position: absolute;
	  opacity: 1;
	  width: 80%;
	  margin-left: 10%;
	  margin-top: 40%;
	  background-color: white;
	  border-radius: 15rpx;
  }
  .shell-title{
	  font-size: 30rpx;
	  padding: 15rpx;
	  color: white;
	  background-color: #cc3300;
	  border-top-left-radius: 15rpx;
	  border-top-right-radius: 15rpx;
  }
  .shell-btn{
	  color: #cc3300;
	  font-size: 30rpx;
	  text-align: center;
	  font-weight: bold;
	  background-color: #ededed;
  }
</style>